<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>后台首页</title>
    <!--vue js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--elementui css js-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            font-weight: bold;
        }

        .el-footer{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .el-aside {
            background-color: lightblue;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 36px;
            overflow: hidden;
            height: 780px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        iframe{
            width: 100%;
            height: 100%;
        }
        .el-carousel__item h3 {
            color: #475669;
            font-size: 30px;
            font-weight: bold;
            opacity: 0.75;
            line-height: 100px;
            margin: 0;
            text-align: center;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: lightblue;
            /*background-image: url("/static/imgs/1.jpg");*/
            /*background-image: url("/static/images/2.bmp");*/
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: aquamarine;
            /*background-image: url("/static/imgs/2.jpg");*/
        }
        .el-tabs{
            height: 730px;
        }
        .el-tab-pane{
            height: 630px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="block">
        <!--                <span class="demonstration">默认 Hover 指示器触发</span>-->
        <el-carousel height="100px">
            <el-carousel-item v-for="item in 4" :key="item">
                <h3>刘军委公司后台管理系统</h3>
            </el-carousel-item>
        </el-carousel>
    </div>
    <el-container>
<!--        <el-header>-->
<!--        </el-header>-->
        <el-container>
            <el-aside width="200px">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" highlight-current="true"></el-tree>
            </el-aside>
            <el-main>
                <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                    >
                        <iframe :src="item.url" name="main" scrolling="no" frameborder="0"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
<!--            <el-footer>Footer</el-footer>-->
        </el-container>
    </el-container>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            data:[],
            editableTabsValue: '1',
            editableTabs: [{
                title: '后台默认首页',
                name: '1',
                url:'/html/emp/list.html'
            }],
            tabIndex: 1
        },
        created:function(){
            _this = this;
            //初始化
            axios.get('/power/treeData')
                .then(function (response) {
                    //正确请求时，回调函数
                    console.log(response);
                    if(response.data.code==2000){
                        _this.data = response.data.data;
                    }
                })
                .catch(function (error) {
                    //失败处理
                    console.log(error);
                });
        },
        methods:{
            //节点点击事件
            handleNodeClick(data,node,t) {
                console.log(data);
                if(data.menuUrl!=null&&data.menuUrl!=''
                    &&data.menuUrl!='null'&&data.menuUrl!=undefined) {
                    // addTab 两个参数： 第一个标签页名称 第二参数请求的url地址
                    this.addTab(data.label, data.menuUrl);
                }
            },
            //添加标签页
            addTab(tabName,menuUrl) {
                let newTabName = ++this.tabIndex + '';
                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签白变量
                var  isHaveTab = false;
                //tabs = [{title:'后台默认首页',name:'1', url:'https://www.baidu.com'},{title:'用户添加',name:'2', url:'https://www.baidu.com'},{title:'用户更新',name:'3', url:'https://www.baidu.com'}.。。。]
                //循环所有页签页   当前点击的叫部门管理
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(tabName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName =tab.name;
                    }
                });
                //原标签页中不存在新加title时，添加新标签页
                //过去写法  不好   不会高亮
                /*  var jsonTabs = JSON.stringify(this.editableTabs);
                  if(jsonTabs.indexOf(tabName)==-1){
                      this.editableTabs.push({
                          title: tabName,
                          name: newTabName,
                          url: menuUrl
                      });
                  }*/
                if(!isHaveTab) {
                    this.editableTabs.push({
                        title: tabName,
                        name: newTabName,
                        url: menuUrl
                    });
                }
                //高亮显示
                this.editableTabsValue = newTabName;
            },
            //移除标签页
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                console.log(targetName+"....."+activeName);
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        }
    });
</script>
</body>
</html>